<!--
 * @Author: ruins
 * @Date: 2022-01-21 10:50:11
 * @LastEditors: ruins
 * @LastEditTime: 2022-01-21 11:40:55
 * @FilePath: \white-dragon\src\views\Attendance\index.vue
-->
<template>
  <div>
    <title-bar>
      <p>出勤</p>
    </title-bar>
    <!-- 打卡 -->
    <play-card />

    <!-- 选择日期 -->
    <el-row class="date-content">
      <el-form :inline="true" :model="searchData" class="demo-form-inline">
        <el-form-item prop="time" label="考勤时间">
          <el-date-picker
            type="date"
            v-model="searchData.time"
            placeholder="选择日期"
            style="width: 60%;"
          ></el-date-picker>
        </el-form-item>
        <el-form-item prop="auditStatus" label="考勤状态">
          <el-select placeholder="考勤状态" v-model="searchData.auditStatus">
            <el-option label="正常" value="正常"></el-option>
            <el-option label="迟到" value="迟到"></el-option>
            <el-option label="缺勤" value="缺勤"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="审核状态">
          <el-select placeholder="审核状态" v-model="value">
            <el-option label="待审核" value="shanghai"></el-option>
            <el-option label="审核" value="beijing"></el-option>
            <el-option label="通过" value="beijing"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary">搜索</el-button>
          <el-button type="primary" plain>重置</el-button>
        </el-form-item>
      </el-form>
    </el-row>
    <attendance-table :tableData="formData" @resetAttendance="resetAttend" />
  </div>
</template>

<script>
import PlayCard from '@/views/Attendance/components/PlayCard.vue'
import AttendanceTable from './components/AttendanceTbale.vue'
import { getAttendance } from '@/api/attendance'
export default {
  components: {
    PlayCard,
    AttendanceTable

  },
  data () {
    return {
      attendanceId: '',
      value: '',
      formData: [],
      searchData: {
        time: '',
        auditStatus: ''
      }
    }
  },
  created () {
    this.getAttendances()
  },
  methods: {
    async getAttendances () {
      const { data } = await getAttendance()
      this.formData = data
    },
    resetAttend () {
      this.getAttendances()
    }

  }
}
</script>

<style scoped lang="less">
.date-content {
  margin-top: 20px;
}
</style>
